<template>
  <div class="com-banner-swiper swiper-container" id="bannerSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
          <img :src="parseInt(showIntroduce) ? item.image : item" alt="">
        </div>
      </div>
      <div class="banner-cover text-center" v-if="parseInt(showIntroduce)">
        <h3 class="zh-name">{{zhName}}</h3>
        <h4 class="en-name">{{enName}}</h4>
        <div class="introduce">{{excerpt}}</div>
      </div>
      <div class="swiper-tip">
        <div class="swiper-tip-inner clear-float">
          <div class="fleet-button-prev"><i class="fa fa-angle-left"></i></div>
          <div class="swiper-pagination"></div>
          <div class="fleet-button-next"><i class="fa fa-angle-right"></i></div>
        </div>
      </div>
  </div>
</template>

<script>
import $ from 'jquery'
import Swiper from 'Swiper'
import 'swiper/dist/css/swiper.min.css'
export default{
  props: {
    showIntroduce: String,
    zhName: String,
    enName: String,
    excerpt: String,
    slides: Array
  },
  mounted: function () {
    let $bannerSwiper = $('#bannerSwiper')
    let $nextBtn = $bannerSwiper.find('.fleet-button-next')
    let $prevBtn = $bannerSwiper.find('.fleet-button-prev')
    let $pagination = $bannerSwiper.find('.swiper-pagination')
    this.bannerSwiper = new Swiper($bannerSwiper, {
      autoplay: 5000,
      pagination: $pagination,
      paginationClickable: true,
      prevButton: $prevBtn,
      nextButton: $nextBtn,
      paginationBulletRender: function (swiper, index, className) {
        let _index = (index + 1) > 9 ? index + 1 : '0' + (index + 1)
        return '<span class="' + className + '">' + _index + '</span>'
      }
    })
  }
}
</script>
<style lang="less">
@import "~assets/css/variable.less";
@import "~assets/css/mixins.less";
.com-banner-swiper{
  width:100%;
  position:relative;
  .banner-cover{
    position:absolute;
    top:50%;
    left:50%;
    z-index:99;
    padding:56px;
    background-color:rgba(0, 0, 0, 0.25);
    font-size:16px;
    color:#fff;
    .translate3d(-50%,-50%,0);
    .zh-name{font-weight:normal; font-size:78px; line-height:1.2;}
    .en-name{font-weight:normal; font-size:30px; margin-bottom:0.5em;}
  }
  .swiper-slide{
    font-size:0;
    line-height:0;
  }
  .swiper-tip{
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    z-index:9;
    text-align:center;
    padding:80px 0 40px 0;
    .gradient-vertical(@start-color:rgba(0,0,0,0), @end-color:rgba(0,0,0,0.5), @start-percent: 0%, @end-percent:100%);
    .swiper-tip-inner{
      display:inline-block;
    }
  }
  .swiper-pagination{
    position:static;
    width:auto;
    display:inline-block;
    padding-left:1em;
    padding-right:1em;
    font-size:14px;
    line-height:0;
    float:left;
    .swiper-pagination-bullet{
      width:3px;
      height:3px;
      margin:0 5px;
      text-indent:-999em;
      background-color:#fff;
      opacity:1;
      &.swiper-pagination-bullet-active{
        text-indent:0;
        font-size:16px;
        line-height:30px;
        width:auto;
        height:30px;
        background-color:transparent;
        color:#fff;
        border-bottom:3px solid #fff;
        .border-radius(0);
        font-family:'Conv_Oswald-Regular','Microsoft YaHei';
      }
    }
  }
  .fleet-button-prev,.fleet-button-next{
    float:left;
    display:inline-block;
    color:#fff;
    cursor:pointer;
    text-align:center;
    i{font-size:30px;}
    &.swiper-button-disabled{
      opacity:0.5;
    }
  }
  @media screen and (max-width:1680px){
    .banner-cover{
      font-size:16px;
      padding:50px;
      .zh-name{font-size:60px;}
      .en-name{font-size:28px;}
    }
  }
  @media screen and (max-width:1366px){
    .banner-cover{
      font-size:14px;
      padding:40px;
      .zh-name{font-size:48px;}
      .en-name{font-size:24px;}
    }
    .swiper-tip{padding:70px 0 20px 0;}
  }
  @media screen and (max-width:1024px){
    .banner-cover{
      padding:30px;
      .zh-name{font-size:36px;}
      .en-name{font-size:18px;}
    }
  }
  @media screen and (max-width:992px){
    .banner-cover{
      width:50%;
      .zh-name{font-size:40px;}
      .en-name{font-size:20px;}
      .introduce{
        br{display:none;}
      }
    }
    .swiper-tip{padding:60px 0 10px 0;}
  }
  @media screen and (max-width:768px){
    .banner-cover{
      top:40%;
      padding:1.5em;
      .zh-name{font-size:20px;}
      .en-name{font-size:14px; margin-bottom:0;}
      .introduce{display:none;}
    }
    .swiper-tip{
      text-align:right;
      padding-right:1em;
    }
  }
}
</style>



